//导入Vue Router模块中的两个方法
import { createRouter, createWebHistory } from "vue-router";
//导入路由需要用到的自定义组件
import Home from "@/components/Home.vue";
import Single from "@/components/Single.vue";
import Category from "@/components/Category.vue";
import NotFoundComponent from "@/components/404.vue";
import Search from "@/components/Search.vue";
import Login from "@/components/page/Login.vue";
import User from "@/components/user/Home.vue";
import Expore from "@/components/page/Expore.vue";
import Archive from "@/components/Archive.vue";
import Test from "@/components/Test.vue";

//定义路由
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    meta: {
      breadcrumb: [{ name: "首页", path: "/home" }],
    },
  },
  {
    path: "/single/:id",
    name: "Single",
    component: Single,
    meta: {
      breadcrumb: [{ name: "文章页", path: "/single" }],
    },
  },
  {
    path: "/category/:id",
    name: "Category",
    component: Category,
    meta: {
      breadcrumb: [{ name: "分类页", path: "/category" }],
    },
  },
  {
    path: "/archive/:category?/:year?/:month?",
    name: "Archive",
    component: Archive,
    meta: {
      breadcrumb: [{ name: "存档页", path: "/archive" }],
    },
    props: (route: { query: { page: any } }) => ({ page: route.query.page }),
    /**
     * 添加了一个props属性，用于将查询参数传递给组件。这里我们使用了箭头函数，将查询参数page作为一个名为page的属性传递给了Archive组件。
这样，在路由/archive/iphone/2022/09?page=2匹配到该路由时，将会将page=2传递给Archive组件，从而我们就可以在组件内部访问到查询参数了。
     */
  },
  {
    path: "/:pathMatch(.*)",
    name: "Notfound",
    component: NotFoundComponent,
    meta: {
      breadcrumb: [{ name: "404页", path: "/:pathMatch(.*)" }],
    },
  },
  {
    path: "/search/:q",
    name: "Search",
    component: Search,
    meta: {
      breadcrumb: [{ name: "搜索页", path: "/search" }],
    },
  },
  {
    path: "/login",
    name: "Login",
    component: Login,
    meta: {
      breadcrumb: [{ name: "登录页", path: "/login" }],
    },
  },
  {
    path: "/user",
    name: "User",
    component: User,
    meta: {
      breadcrumb: [{ name: "用户页", path: "/user" }],
    },
  },
  {
    path: "/expore",
    name: "Expore",
    component: Expore,
    meta: {
      breadcrumb: [{ name: "过期页", path: "/expore" }],
    },
  },
  {
    path: "/test",
    name: "Test",
    component: Test,
    meta: {
      breadcrumb: [{ name: "测试页", path: "/test" }],
    },
  },
];

//创建路由对象
const router = createRouter({
  history: createWebHistory(),
  routes: routes,
});
export default router;
